<template>
      <div id="systemNewsBox">
        <el-container style="position:relative;height:100%">
            <el-header style="height:100px">
                <el-container  style="height:100px">
                    <el-aside width="350px">
                        <el-row style="margin-top:40px;margin-left:20px">
                            <!-- <el-col :span="6" class="imgCol">
                                <i class="iconfont iconxuanze pointer" style="font-size:25px;margin-right:10px;color:#409EFF" @click="chooseAction"></i>
                                <span class="pointer" @click="chooseAction">选择</span>
                            </el-col> -->
                             <el-col :span="6" class="imgCol" >
                                <i class=" el-icon-delete pointer" style="font-size:25px;margin-right:10px;color:#fd034f" @click="deleteResure"></i>
                                <span class="pointer" @click="deleteResure">删除</span>
                            </el-col>
                             <!-- <el-col :span="6" class="imgCol" v-show="actionReady" >
                                <i class="el-icon-circle-close pointer" style="font-size:25px;margin-right:10px;color:#409EFF" @click="cancleAction"></i>
                                <span class="pointer" @click="cancleAction">取消</span>
                            </el-col> -->
                        </el-row>
                    </el-aside>
                    <el-main >
                        <el-row style="margin-top:40px;">
                 
                            <el-col :span="16" :offset="7">
                                <!-- <el-input>
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input> -->
                                 <el-input placeholder="请输入内容" v-model="keyWord">
                                    
                                    <el-button slot="append" icon="el-icon-search" @click="changeKeyWord"></el-button>
                                </el-input>
                            </el-col>
                        </el-row>
                    </el-main>
                </el-container>
            </el-header>
            <el-main>
                    <el-table
                            ref="table"
                            :data="tableData"
                            stripe
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column
                                type="selection"
                                >
                            </el-table-column>
                            <el-table-column
                                prop="title"
                                label="标题"
                              >
                            </el-table-column>
                            <el-table-column
                                prop="date"
                                label="时间">
                                <template slot-scope="scope">
                                    <i class="el-icon-time"></i>
                                    <span style="margin-left: 10px">{{ scope.row.datetime}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                prop="action"
                                label="操作"
                            >
                               <template slot-scope="scope">
                                   <el-row>
                                       <el-col :span="12">
                                            <el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
                                       </el-col>
                                       <el-col :span="12" v-if="scope.row.hasRead===false">
                                            <el-button
                                                @click.native.prevent="ignoreNews(scope.row)"
                                                type="primary"
                                                size="mini"
                                                icon="iconfont iconhulue"
                                                plain>
                                                忽略
                                            </el-button>
                                       </el-col>
                                       <el-col :span="12" v-else>
                                            <el-button
                                               type="info"
                                               disabled
                                                size="mini"
                                                icon="iconfont iconhulue"
                                                plain>
                                                已读
                                            </el-button>
                                       </el-col>
                                   </el-row>
                                </template>
                            </el-table-column>
                            <el-table-column type="expand">
                                  <template  slot-scope="scope">
                                    <div style="margin-left:20px">
                                        <el-row>
                                            <i class="iconfont iconclass" style="font-size:25px;color:#409EFF"></i>
                                            <span style="color:#409EFF">基本信息</span>
                                        </el-row>
                                        <div style="margin-left:20px">
                                            <el-row style="margin-top:10px">
                                                <i class="el-icon-postcard" style="color:#409EFF"></i> 
                                                <span class="basdInfoWords">培训名称：{{scope.row.baseInfo.name?scope.row.baseInfo.name:"未知"}}</span>
                                            </el-row>
                                            <el-row style="margin-top:10px">
                                                <i class="el-icon-sell"  style="color:#409EFF"></i>
                                                    <span class="basdInfoWords">发布时间：{{scope.row.baseInfo.time?scope.row.baseInfo.time:"未知"}}</span>
                                            </el-row>
                                            <el-row style="margin-top:10px">
                                                <i class="iconfont iconlianxiwomen-copy"  style="color:#409EFF"></i>
                                                <span class="basdInfoWords">联系方式：{{scope.row.baseInfo.contact?scope.row.baseInfo.contact:"未知"}}</span>
                                            </el-row>
                                        </div>
                                    </div>
                                     <div style="margin-left:20px;margin-top:20px">
                                        <el-row>
                                            <i class="iconfont iconxianshiqujingjizhibiao" style="font-size:25px;color:#E6A23C"></i>
                                            <span style="color:#E6A23C">重要指标</span>
                                        </el-row>
                                        <div style="margin-left:20px;margin-right:20px">
                                            <el-table 
                                                style="margin-top:10px"
                                                :data="tableData[scope.$index].zhiBiaoData"
                                                stripe
                                                border
                                            >
                                                <el-table-column
                                                    prop="clickCount"
                                                    label="点击量"
                                                    >
                                                    <template slot-scope="scope">
                                                        <i class="iconfont icondianji" style="color:#E6A23C;font-size:20px"></i>
                                                        <span style="margin-left: 10px">{{scope.row.clickCount}}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    prop="enrollCount"
                                                    label="报名量"
                                                >
                                                    <template slot-scope="scope">
                                                        <i class="iconfont iconbaoming" style="color:#E6A23C;font-size:20px"></i>
                                                        <span style="margin-left: 10px">{{scope.row.enrollCount}}</span>
                                                    </template>
                                                </el-table-column>
                                                <!-- <el-table-column
                                                    prop="save"
                                                    label="收藏量"
                                                >
                                                    <template slot-scope="scope">
                                                        <i class="iconfont iconhuabanfuben" style="color:#E6A23C;font-size:20px"></i>
                                                        <span style="margin-left: 10px">{{ scope.row.save }}</span>
                                                    </template>
                                                </el-table-column> -->
                                                <el-table-column
                                                    prop="shareCount"
                                                    label="分享量"
                                                    >
                                                    <template slot-scope="scope">
                                                        <i class="iconfont iconfenxiang" style="color:#E6A23C;font-size:20px"></i>
                                                        <span style="margin-left: 10px">{{scope.row.shareCount}}</span>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </div>
                                  </template>
                            </el-table-column>
                        </el-table>
            </el-main>
            <el-footer style="position:absolute;bottom:0px">
                <el-pagination
                    background
                    layout="total,prev, pager, next"
                    @current-change="changePages"
                    :page-size="pageInfo.pageSize"
                    :total="pageInfo.total">
                </el-pagination>
            </el-footer>
        </el-container>
    </div>
</template>
<script>
export default {
    data(){
        return{
            actionReady:false,
            currentStatus:1,
            
            tableData:[],
            detailData:[],
            zhiBiaoData:[],
            pageInfo:{
                pageSize:7,
                pageNum:1,
                total:0,
            },
            keyWord:'',
            deleteGroup:[],
            //是否可展开详情
            haseDetail:false,
        }
    },
    mounted(){
        var body=document.getElementById('systemNewsBox');
        var height=document.documentElement.clientHeight-120;
        body.style.height=height+'px';
        console.log(height);

        var params={
            pageNo:1,
            pageSize:this.pageInfo.pageSize,
            keyWord:''
        }
        this.getSystemNews(params);
    },
    methods:{
        chooseAction(){
            this.actionReady=true;
        },
        cancleAction(){
            this.actionReady=false;
        },
        //获取系统消息概览
        getSystemNews(params){
            var URL=this.IP+'/message/systemMessagesSearch';
            console.log(URL);
            console.log(params);
            this.$ajax({
                method:'get',
                url:URL,
                params:params
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.tableData=response.data.data.info;
                    this.pageInfo.total=response.data.data.total;
                    var i=0;
                    for(i=0;i<this.tableData.length;i++){
                        this.getDetailInfo(i,this.tableData[i].url);
                    }
                    console.log(this.tableData);
                }else{
                    this.pageInfo.total=0;
                    this.tableData=[];
                  console.log(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })


        },
        //用户输入关键字搜索
        changeKeyWord(){
            this.pageInfo.pageNum=1;
            var params={
                pageNo:this.pageInfo.pageNum,
                pageSize:this.pageInfo.pageSize,
                keyWord:this.keyWord,
            }
            this.getSystemNews(params);
        },
        //用户翻页
        changePages(val){
            console.log(val);
            this.pageInfo.pageNum=val;
            var params={
                pageNo:this.pageInfo.pageNum,
                pageSize:this.pageInfo.pageSize,
                keyWord:this.keyWord,
            }
            this.getSystemNews(params);
        },
        //忽略
        ignoreNews(row){
            var URL=this.IP+'/message/systemMessageIgnore';
            console.log(URL);
            this.$ajax({
                method:'post',
                url:URL,
                params:{
                    messageId:row.id
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.$message({
                        message: response.data.data,
                        type: 'success'
                    });
                //    setTimeout(()=>{      
                //         this.$router.go(0);
                //    },2000);
                    var params={
                        pageNo:this.pageInfo.pageNum,
                        pageSize:this.pageInfo.pageSize,
                        keyWord:this.keyWord
                    } 
                this.getSystemNews(params);
         
                }else{
                    this.$message.error(response.data.msg);
                    console.log(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //确认是否删除
        deleteResure(){
            this.$confirm('此操作将永久删除这些信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if(this.deleteGroup.length===0){
                    this.$message({
                        message: '请选择要删除的信息！',
                        type: 'error'
                    });
                }else{
                    this.deleteSystemNews();
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //批量选中
        handleSelectionChange(val){
            //console.log(val);
            var i=0;
            this.deleteGroup=[];
            for(i=0;i<val.length;i++){
                this.deleteGroup[i]=(val[i].id);
            }
            console.log(this.deleteGroup);
        },
        //批量删除系统消息
        deleteSystemNews(){
            var URL=this.IP+'/message/systemMessageRemove';
            console.log(URL);
            console.log(this.deleteGroup);
            this.$ajax({
                method:'delete',
                url:URL,
                data:this.deleteGroup
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.$message({
                        message: response.data.data,
                        type: 'success'
                    });
                    this.getSystemNews();
                    // setTimeout(()=>{
                    //     this.$router.go(0);
                    // },2000);
                    var params={
                        pageNo:this.pageInfo.pageNum,
                        pageSize:this.pageInfo.pageSize,
                        keyWord:this.keyWord
                    } 
                this.getSystemNews(params);
                }else{
                    this.$message.error(response.data.msg);
                    console.log(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //获取每个系统消息的详细信息
        getDetailInfo(index,URL){
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
            }).then(response=>{
                console.log("详细系统消息：");
                console.log(response.data);
         
                var code=response.data.code;
                if(code==0){
                    this.tableData[index].baseInfo={
                        contact:response.data.data.contact,
                        name:response.data.data.name,
                        time:response.data.data.time
                    }
                    this.tableData[index].zhiBiaoData=[
                        {
                            shareCount:response.data.data.shareCount,
                            clickCount:response.data.data.clickCount,
                            enrollCount:response.data.data.enrollCount
                        }
                    ]
                  //this.$set(this.tableData[index].zhiBiaoData,0,{shareCount:response.data.data.shareCount,clickCount:response.data.data.clickCount,enrollCount:response.data.data.enrollCount});
                    console.log(this.tableData);
                }else{
                    
                    console.log(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
               
            })
        },
        //展开消息
        toogleExpand(row){
            console.log(row)
      
                let $table = this.$refs.table;
                $table.toggleRowExpansion(row);
            
     
        },
    }
}
</script>
<style>
.el-icon-arrow-right:before{
    display: none;
}

#systemNewsBox{
/* height:600px; */
background-color:#fff;
margin:15px;
border-radius:5px
}
.el-header,.el-main,.el-footer,.el-aside{
    padding: 0px;
}
.end{
    display: flex;
    justify-content: flex-end;
}
.pointer{
    cursor:pointer;
}
.imgCol{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>